<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>国信安-教务系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  
  <link rel="stylesheet" href="layui/css/layui.css"  media="all">
  <style>
    /* 移动端 */
    
    
    @media screen and (max-width: 768px) {
      .layui-layout-admin .layui-layout-left,
      .layui-layout-admin .layui-body,
      .layui-layout-admin .layui-footer{left: 0;}
      .layui-layout-admin .layui-side{left: -300px;}
    }
  </style>
</head>
<body>
 
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">教务菜单</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <!-- 移动端显示 -->  
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          <img src="/image/anzai.png" class="layui-nav-img">
         <span class="adminNick">11</span>
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">更改头像</a></dd>
          <dd><a href="login.html">退出登录</a></dd>
        </dl>
      </li>
      <!--<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
          <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
      </li>-->
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">课程管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;"  data-options="{no:1,name:'课程信息',url:'course.html'}">课程信息</a></dd>
            <dd><a href="javascript:;"  data-options="{no:2,name:'课程类型信息',url:'type.html'}">课程类型信息</a></dd>
            <dd><a href="javascript:;"  data-options="{no:3,name:'课程信息',url:'aclass.html'}">班级信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">人员管理</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" data-options="{no:4,name:'师资管理',url:'teacher.html'}">师资管理</a></dd>
            <dd><a href="javascript:;" data-options="{no:5,name:'学生管理',url:'student.html'}">学生管理</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;" data-options="{no:6,name:'修改密码',url:'updatePwd.html'}">修改密码</a></li>
        <li class="layui-nav-item"><a href="javascript:;" data-options="{no:6,name:'统计学生年龄分布',url:'statisticsAge.html'}">统计学生年龄分布</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
			<div  class="layui-tab" lay-allowClose="true" lay-filter="body-context">
			      <ul class="layui-tab-title"><!--选项卡-->
			      </ul>
			      <div class="layui-tab-content"><!--内容-->
			      </div>
			</div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
	国信安&copy;百杰255部
  </div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script>
  $(function () {
    //请求ajax  获取头像路径
    $.getJSON("getAdminInfo",function(result){
        $(".layui-nav-img").prop("src",result.headImg);
        $(".adminNick").text(result.nick);

    });
  })

//JS 
layui.use(['element', 'layer', 'util'], function(){
		  var element = layui.element
		  ,layer = layui.layer
		  ,util = layui.util
		  ,$ = layui.$;


  //选择  所以.layui-nav-item 里面的  a 元素 并且a元素要有 data-options属性才被选中
   $('.layui-nav-item a[data-options]').click(function () {
   		 //获得点击的a 元素的 data-options  值
      var options = eval('('+$(this).data('options')+')');//string->json  用eval转换为json
      var url = options.url;
      var title = options.name;
      var id = options.no;
      console.log(options);
      //窗口是否打开  默认没有开启
      var  open=false;
       //循环判断
       $(".layui-tab-title").children("li").each(function (index, obj) {
           if($(obj).attr("lay-id")== id){
               open=true;
           }
       });
       //判断是否被打开过
       if(!open){
           //没打开新打开
           element.tabAdd('body-context', {
               title: title,
               content: '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>',
               id: id
           });
       }
       //当前被点击的菜单 内容显示
       element.tabChange('body-context', id);
   		 FrameWH();//计算框架高度
		});
				
				function FrameWH() {
				    var h = $(window).height() -100;
				    //iframe的宽度
				    $("iframe").css("height",h+"px");
				}
});
</script>

</body>
</html>
